<template>
    <div class="details">
        <MyCard></MyCard>
        <div class="pagination ">
            <n-pagination v-model="page" :page-count="100"  @click="handlePagination" />
        </div>

    </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import Card from '@/components/Card.vue'
  export default defineComponent({
    name: 'Details',
    components: {
      MyCard: Card
    },
    setup() {
      return {
        page: 1
      }
    },
    methods: {
      handlePagination(e) {
        console.log(this.page);
        console.log(e.target.innerText);
      }
    },
  });
</script>

<style lang="scss" scoped>
    .details {
        position: relative;
        margin: 0 auto;
        height: 800px;
        .n-card {
            max-width: 240px;
            margin-top: 20px;
            .n-page-header {
                background-color: #fff;
                height: 50px;
                line-height: 50px;
            }
            .card_buttom {
                display: flex !important;
                margin-top: 8px;
                padding: 0;
                justify-content: space-between;
            }
        }
        .pagination {
            position: absolute;
            bottom: 5px;
            left: 50%;
        }
    }
</style>
